<template>
  <div>
    <div class="banner-wrapper" @click="handlecBannerClick">
      <img class="banner-img" :src="bannerImgUrl" />
      <div class="banner-info">
        <div class="banner-info__title">{{this.detailTitle}}</div>
        <div class="banner-info__num"><span class="iconfont">&#xe632;</span>39</div>
      </div>
    </div>
    <fade>
      <common-gallery
        v-show="showGallary"
        @galleryClose="handleGalleryClose"
        :imgUrls="galleryImgUrls">
      </common-gallery>
    </fade>
  </div>
</template>

<script type="text/ecmascript-6">
import Gallery from 'common/gallery/gallery'
import Fade from 'common/fade/fade'
export default {
  name: 'Banner',
  components: {
    CommonGallery: Gallery,
    Fade
  },
  props: {
    detailTitle: String,
    bannerImgUrl: String,
    galleryImgUrls: Array
  },
  data () {
    return {
      showGallary: false,
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction'
      }
    }
  },
  methods: {
    handlecBannerClick () {
      this.showGallary = true
    },
    handleGalleryClose () {
      this.showGallary = false
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~styles/scss/variable";
  @import "~styles/scss/mixins";
  .banner-wrapper {
    position: relative;
    font-size: 0;
    @include fixedHeght(55%);
    background: #eee;
    .banner-img {
      width: 100%;
    }
    .banner-info {
      display: flex;
      align-items: center;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: .6rem;
      line-height: .6rem;
      color: #fff;
      background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.8));
      &__title {
        flex: 1;
        font-size: $fontSize-regular;
        text-indent: .1rem;
        @include ellipsis();
      }
      &__num {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: .1rem;
        padding: 0 .2rem;
        height: .4rem;
        line-height: .2rem;
        text-align: center;
        background: rgba(0,0,0,.6);
        border-radius: .6rem;
        font-size: $fontSize-small;
        .iconfont {
          margin-right: .04rem;
        }
      }
    }
  }
  /*.gallery-wrapper {*/
    /*display: flex;*/
    /*align-items: center;*/
    /*position: absolute;*/
    /*top: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*background: rgba(0,0,0,.9);*/
    /*.swiper {*/
      /*width: 100%;*/
      /*.gallery-img {*/
        /*width: 100%;*/
      /*}*/
    /*}*/
  /*}*/
</style>
<!--<style scoped>-->
  <!--.gallery-wrapper >>> .swiper-pagination {-->
    <!--position: fixed;-->
    <!--bottom: 1rem;-->
    <!--color: #fff;-->
  <!--}-->
<!--</style>-->
